<script setup lang="ts">
// import { showToast } from 'vant'

interface Iprops {
  content: {
    seriesId?: string
    statusName?: string
    name?: string
    time?: string
    address?: string
  }[];
  showContentIcon: boolean;
  isVaild: boolean
}

const props = withDefaults(defineProps<Iprops>(), {
  content: () => { },
  showContentIcon: true,
  isVaild: true
})

const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1)
    }
    loading.value = false

    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}
</script>

<template>
  <div class="tab-list-item text-[14px] bg-white rounded-[10px] p-[16px] box-border min-h-[142px] my-[16px]">
    <div class="flex flex-row items-center justify-between mb-[16px]">
      <div class="flex flex-row items-center w-[82.5%]" :class="isVaild ? 'text-[#444444]' : 'text-[#969BA5]'">
        <img v-if="isVaild" src="@/assets/icons/item-active-icon.png" class="w-[16px] h-[16px] mr-[4px]" />
        <img v-else src="@/assets/icons/item-unactive-icon.png" class="w-[16px] h-[16px] mr-[4px]" />
        <div class="overflow-hidden whitespace-nowrap text-ellipsis">{{ content.seriesId }}</div>
      </div>
      <div class="text-[#188AF3]">{{ content.statusName }}</div>
    </div>
    <div :class="isVaild ? 'text-[#444444]' : 'text-[#969BA5]'">
      <div class="flex flex-row items-center mb-[10px]">
        <template v-if="showContentIcon">
          <img v-if="isVaild" src="@/assets/icons/item-name-active-icon.png" class="w-[14px] h-[14px] mr-[5px]" />
          <img v-else src="@/assets/icons/item-name-unactive-icon.png" class="w-[14px] h-[14px] mr-[5px]" />
        </template>
        <div class="">{{ content.name }}</div>
      </div>
      <div class="flex flex-row items-center mb-[10px]">
        <template v-if="showContentIcon">
          <img v-if="isVaild" src="@/assets/icons/item-time-active-icon.png" class="w-[14px] h-[14px] mr-[5px]" />
          <img v-else src="@/assets/icons/item-time-unactive-icon.png" class="w-[14px] h-[14px] mr-[5px]" />
        </template>
        <div class="">{{ content.time }}</div>
      </div>
      <div class="flex flex-row items-center">
        <template v-if="showContentIcon">
          <img v-if="isVaild" src="@/assets/icons/item-poi-active-icon.png" class="w-[14px] h-[14px] mr-[5px]" />
          <img v-else src="@/assets/icons/item-poi-unactive-icon.png" class="w-[14px] h-[14px] mr-[5px]" />
        </template>
        <div class="">{{ content.address }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-list-item {}
</style>
